<script lang="ts" setup>
import { ref } from 'vue';
import { watch } from 'vue';
import { onMounted } from 'vue';
import { Ref } from 'vue';

// import { dialogProps } from 'vant';

const props = defineProps<{
  chartInfoList: Ref<
    {
      time: string;
      avatar: string;
      message?: string;
      type: string;
      oneself: boolean;
      accountName: string;
      imageUrl?: string;
    }[]
  >;
  imageList: {
    show: boolean;
    src: (string | undefined)[];
    currentIndex: number;
  };
  onChangeImagePreview: (index: number) => void;
  onShowImagePreview: (src: string) => void;
  isExpand: boolean;
  isLineBreak: boolean;
}>();

const content = ref<HTMLDivElement | null>(null);
const onToBottom = () => {
  // 进入页面自动滚动到最底部
  content.value!.scrollTop = content.value!.scrollHeight;
};
// 首次加载到最底部
onMounted(() => {
  onToBottom();
});
watch([() => props.isExpand, () => props.isLineBreak], () => setTimeout(onToBottom));
</script>

<template>
  <div class="content" ref="content">
    <div class="content-list" ref="contentList" id="contentList">
      <div class="singleInfo" v-for="item in chartInfoList.value" :key="item.time" :info="item">
        <div class="time" v-if="item.time">
          <span>{{ item.time }}</span>
        </div>
        <div class="content">
          <img class="img" :src="item.avatar" :style="{ float: item.oneself ? 'right' : 'left' }" />
          <div class="info" :style="{ float: item.oneself ? 'right' : 'left' }">
            <div class="accountName" v-if="!item.oneself" :style="{ textAlign: item.oneself ? 'right' : 'left' }">
              {{ item.accountName }}
            </div>
            <div
              v-if="item.type === 'message'"
              class="message"
              :style="{
                backgroundColor: item.oneself ? '#A9EA7A' : '#fff',
                marginTop: item.oneself ? '8px' : '0'
              }"
            >
              {{ item.message }}
              <div :class="item.oneself ? 'triangleToRight' : 'triangleToLeft'"></div>
            </div>
            <div
              v-if="item.type === 'image'"
              class="image"
              :style="{
                marginTop: item.oneself ? '8px' : '0'
              }"
            >
              <img :src="item.imageUrl" @click="onShowImagePreview(item.imageUrl as string)" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <van-image-preview
    v-model:show="imageList.show"
    :start-position="imageList.currentIndex"
    :images="imageList.src as string[]"
    @change="onChangeImagePreview"
  >
    <template v-slot:index>第{{ imageList.currentIndex + 1 }}页</template>
  </van-image-preview>
</template>

<style scoped lang="less">
.content {
  flex: 1;
  overflow-y: auto;
}
.singleInfo {
  display: flex;
  flex-direction: column;
  margin: 4px 0;
  .time {
    margin-top: 6px;
    text-align: center;
    display: flex;
    justify-content: center;

    span {
      padding: 2px 4px;
      font-size: 10px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.05);
    }
  }
  .content {
    .img {
      margin: 10px;
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }
    .info {
      max-width: 280px;
      .accountName {
        text-align: end;
        color: #7f8593;
        font-size: 10px;
        margin-bottom: 4px;
      }
      .message {
        border-radius: 4px;
        padding: 6px 10px;
        position: relative;
        word-wrap: break-word;
      }
      .image {
        display: flex;
        img {
          width: 100px;
          height: 100px;
        }
      }
      .triangleToRight {
        position: absolute;
        right: -16px;
        top: 4px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #a9ea7a;
        border-right: 10px solid transparent;
      }
      .triangleToLeft {
        position: absolute;
        left: -16px;
        top: 4px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid #fff;
        border-radius: 4px;
      }
    }
  }
}
</style>
